<template>
  <view class="container">
    <map
      id="map"
			v-if="show"
      style="width: 100%; height: 100vh;"
      :latitude="center.latitude"
      :longitude="center.longitude"
      :markers="markers"
      :scale="16"
      :show-location="true"
      @markertap="handleMarkerTap"
    ></map>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import {onLoad} from '@dcloudio/uni-app'

// 地图中心坐标
const center = ref({
  latitude: 30.820659,
  longitude: 106.423923 
})
const show =ref(false)

// 标记点数组
const markers = ref([])

// 页面加载时接收参数
onLoad((options) => {
	console.log(options.latitude);
	console.log(options.longitude);
	
  if (options.latitude && options.longitude) {
    addMarker({
      latitude: parseFloat(options.latitude),
      longitude: parseFloat(options.longitude),
      name: options.name || '未知地点',
      address: options.address || '未知地址'
    })
		center.value.latitude = options.latitude
		center.value.longitude = options.longitude
		
		show.value = true
  }
})

// 添加标记方法
const addMarker = (location) => {
  // 更新地图中心点
  center.value = {
    latitude: location.latitude,
    longitude: location.longitude
  }

  // 创建标记配置
  const newMarker = {
    id: Date.now(),
    latitude: location.latitude,
    longitude: location.longitude,
    iconPath: '../../static/marker.png', 
    width: 30,
    height: 50,
    anchor: { x: 0.5, y: 1 },
    callout: {
      content: location.name,
      color: '#FFFFFF',
      bgColor: '#007AFF',
      padding: 8,
      borderRadius: 4,
      display: 'ALWAYS'
    },
    customCallout: {
      display: 'ALWAYS'
    },
    extra: {
      address: location.address // 额外信息存储
    }
  }

  markers.value = [newMarker]
}

// 标记点击处理
const handleMarkerTap = (e) => {
  const markerId = e.markerId
  const targetMarker = markers.value.find(m => m.id === markerId)
  
  if (targetMarker) {
    uni.showModal({
      title: targetMarker.callout.content,
      content: `详细地址：${targetMarker.extra.address}`,
      showCancel: false
    })
  }
}

</script>

<style>
.container {
  width: 100%;
  height: 100vh;
}
</style>